<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>添加模组 - MC百科</title>
    <link href="../../img/arrow.svg" rel="icon">
    <link href="../../css/common.css" rel="stylesheet">
    <link href="../../css/header.css" rel="stylesheet">
    <link href="../../css/footer.css" rel="stylesheet">
    <link href="css/addmod.css" rel="stylesheet">
    <script src="/js/jquery-3.7.1.js"></script>
    <style>
        /* 统一风格样式 */
        .warning-header {
            background: linear-gradient(120deg, #66ccff, #3399ff);
            color: #fff;
            padding: 40px;
            text-align: center;
            margin-bottom: 20px;
        }
        .warning-header h1 {
            font-size: 28px;
            margin-bottom: 10px;
        }
        .warning-header p {
            font-size: 16px;
            opacity: 0.9;
        }

        .feedback-bar {
            background: #fff8cc;
            border: 1px solid #ffe57f;
            padding: 10px 20px;
            margin: 0 20px 20px;
            font-size: 14px;
            color: #666;
        }
        .feedback-bar a {
            color: #ff7f00;
            text-decoration: none;
        }
        .feedback-bar a:hover {
            text-decoration: underline;
        }

        .filter-bar {
            display: flex;
            gap: 10px;
            margin: 0 20px 20px;
        }
        .filter-bar input {
            flex: 1;
            padding: 8px;
            border: 1px solid #e5e5e5;
            border-radius: 4px;
        }
        .filter-bar button {
            padding: 8px 20px;
            background: #3399ff;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        /* 左侧帮助栏 */
        .edit-container {
            display: flex;
            gap: 20px;
            margin: 0 20px;
        }
        .edit-sidebar {
            width: 240px;
            background: #f8f9fa;
            border: 1px solid #e5e5e5;
            border-radius: 4px;
            padding: 15px;
        }
        .sidebar-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
            padding-left: 5px;
            border-left: 3px solid #3399ff;
        }
        .sidebar-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .sidebar-list li {
            margin: 8px 0;
        }
        .sidebar-list a {
            color: #495057;
            text-decoration: none;
        }
        .sidebar-list a:hover {
            color: #3399ff;
        }

        /* 右侧编辑区 */
        .edit-main {
            flex: 1;
            background: #fff;
            border: 1px solid #e5e5e5;
            border-radius: 4px;
            padding: 20px;
        }
        .tab-nav {
            display: flex;
            border-bottom: 1px solid #e5e5e5;
            margin-bottom: 20px;
            list-style: none;
            padding: 0;
        }
        .tab-nav li {
            padding: 10px 20px;
            margin-right: 10px;
            cursor: pointer;
            border: 1px solid #e5e5e5;
            border-bottom: none;
            border-radius: 4px 4px 0 0;
            background: #f8f9fa;
        }
        .tab-nav li.active {
            background: #fff;
            border-color: #e5e5e5 #e5e5e5 #fff #e5e5e5;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        .notice {
            color: #666;
            margin-bottom: 15px;
            font-size: 14px;
        }
        .editor-toolbar {
            background: #f8f9fa;
            border: 1px solid #e5e5e5;
            padding: 10px;
            border-radius: 4px 4px 0 0;
        }
        .editor-toolbar button {
            margin-right: 5px;
            padding: 5px 10px;
            border: 1px solid #ccc;
            background: #fff;
            border-radius: 4px;
            cursor: pointer;
        }
        .editor-content {
            width: 100%;
            height: 200px;
            border: 1px solid #e5e5e5;
            border-top: none;
            border-radius: 0 0 4px 4px;
            padding: 10px;
            resize: vertical;
            box-sizing: border-box;
        }

        /* 弹窗样式（与特性警示页一致） */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 999;
        }
        .modal-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #fff;
            width: 500px;
            padding: 20px;
            border-radius: 4px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.2);
        }
        .modal-buttons {
            text-align: right;
            margin-top: 20px;
        }
        .btn-close, .btn-save {
            padding: 8px 20px;
            margin-left: 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .btn-close {
            background: #ccc;
        }
        .btn-save {
            background: #3399ff;
            color: #fff;
        }
    </style>
</head>
<body>
<!-- 头部 -->
<header id="header">
    <script>$("#header").load('../publicPage/header.html')</script>
</header>

<!-- 内容区 -->
<section id="section">
    <!-- 标题区 -->
    <div class="warning-header">
        <h1>添加模组</h1>
        <p>填写模组的基本信息、扩展信息和官方信息，提交后将进入审核流程。</p>
    </div>

    <!-- 反馈提示条 -->
    <div class="feedback-bar">
        如果你在添加过程中遇到问题，可加入编辑讨论群寻求帮助。
        <a href="https://jq.qq.com/?_wv=1027&k=1137659736" target="_blank">加入编辑讨论群 (1137659736)</a>
    </div>

    <!-- 编辑区域 -->
    <div class="edit-container">
        <!-- 左侧编辑帮助栏 -->
        <div class="edit-sidebar">
            <div class="sidebar-title">编辑帮助</div>
            <ul class="sidebar-list">
                <li>MC百科编审部提醒您：</li>
                <li>玩法千万条，严谨第一条。</li>
                <li>编辑不规范，玩家两行泪。</li>
                <li><a href="#">编辑规范：《主站编辑规范》</a></li>
                <li><a href="#">模组收录规则：《模组(Mod)收录规则》</a></li>
                <li><a href="#">命名规则：《主站通用命名规则》</a></li>
                <li><a href="#">模组元素：《模组元素定义与优先级》</a></li>
                <li>快捷键：Alt + X 自动链接</li>
                <li>快捷键：Ctrl + Enter 快速提交</li>
                <li>小技巧：选中文本拖动可保留格式移动</li>
            </ul>
        </div>

        <!-- 右侧主编辑区 -->
        <div class="edit-main">
            <!-- 选项卡导航 -->
            <ul class="tab-nav">
                <li class="active" data-tab="basic">基本信息</li>
                <li data-tab="extend">扩展信息</li>
                <li data-tab="official">官方信息</li>
            </ul>

            <!-- 基本信息 tab -->
            <div class="tab-content basic active">
                <p class="notice">每个模组都需要有的基本信息，包括名称、版本、简介等核心内容。</p>
                <div class="editor-toolbar">
                    <button>撤销</button>
                    <button>重做</button>
                    <button>加粗</button>
                    <button>斜体</button>
                    <button>链接</button>
                    <button>图片</button>
                    <button>代码</button>
                    <button>表格</button>
                </div>
                <textarea class="editor-content" placeholder="请输入模组的基本介绍..."></textarea>
                <p class="notice" style="margin-top: 10px; color: #ff4d4f;">
                    注意：禁止添加第三方下载源（如网盘），作者授权的下载地址需提交至<a href="#">下载授权帖</a>。
                </p>
            </div>

            <!-- 扩展信息 tab -->
            <div class="tab-content extend">
                <p class="notice">扩展信息包括模组特色、玩法说明、兼容性等补充内容。</p>
                <div class="editor-toolbar">
                    <button>撤销</button>
                    <button>重做</button>
                    <button>加粗</button>
                    <button>列表</button>
                    <button>图片</button>
                </div>
                <textarea class="editor-content" placeholder="请输入模组的扩展信息..."></textarea>
            </div>

            <!-- 官方信息 tab -->
            <div class="tab-content official">
                <p class="notice">官方信息包括作者、官网、更新日志等官方渠道内容。</p>
                <div class="editor-toolbar">
                    <button>撤销</button>
                    <button>重做</button>
                    <button>链接</button>
                    <button>代码</button>
                </div>
                <textarea class="editor-content" placeholder="请输入模组的官方信息..."></textarea>
            </div>
        </div>
    </div>

    <!-- 提交按钮 -->
    <div style="margin: 20px; text-align: center;">
        <button class="filter-bar button" id="submit-btn" style="padding: 10px 30px;">提交审核</button>
    </div>
    </div>

    <!-- 提交成功弹窗 -->
    <div class="modal" id="modal">
        <div class="modal-content">
            <h2 id="modal-title">提交成功</h2>
            <p>你的模组信息已提交至审核队列，审核通过后将展示在站点中。</p>
            <div class="modal-buttons">
                <button class="btn-save" onclick="closeModal()">确定</button>
            </div>
        </div>
    </div>
</section>

<!-- 底部 -->
<footer id="footer">
    <script>$("#footer").load('../publicPage/footer.html')</script>
</footer>

<!-- 交互逻辑 -->
<script>
    // 选项卡切换
    $(function() {
        $('.tab-nav li').click(function() {
            const tab = $(this).data('tab');
            $('.tab-nav li').removeClass('active');
            $('.tab-content').removeClass('active');
            $(this).addClass('active');
            $(`.tab-content.${tab}`).addClass('active');
        });

        // 提交按钮
        $('#submit-btn').click(function() {
            $('#modal').show();
        });
    });

    // 关闭弹窗
    function closeModal() {
        $('#modal').hide();
    }
</script>
</body>
</html>